<template>
<div>
  <span>wjmhkjh</span>
    <div class="product" v-on:click="increaseSales" v-for="product in products">
		<div class="price">
		            ¥ {{product.price}}
		</div>
		<div class="productName">
			{{product.name}}
		</div>
		<div class="sale"> 月成交 {{product.sale}} 笔</div>
		<div class="review"> 评价 {{product.review}} </div>
	</div>
    </div>
</template>

<script>
export default {
  data() {
    return {
         products:[
	            {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"},
	            {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"},
	            {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"},
	            ]
    };
  },
  methods: {
		    increaseSales: function () {
		    	this.product.sale = parseInt(this.product.sale);
		      this.product.sale += 1
		      //this.$emit('increment')
		    }
  }
};
</script>

<style scoped>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
div.product:hover{
  border:1px solid #c40000;
  
}
div.price{
  color:#c40000;  
  font-weight:bold;
  font-size:1.2em;
  margin:10px;
}
div.productName{
  color:gray;
  font-size:0.8em;
  margin:10px;
}
div.sale{
  float:left;  
  width:100px;
  border:1px solid lightgray;
  border-width:1px 0px 0px 0px;
  color:gray;
  font-size:0.8em;
  padding-left:10px;
}
div.review{
  overflow:hidden;
  border:1px solid lightgray;
  border-width:1px 0px 0px 1px;
  color:gray;
  font-size:0.8em;  
  padding-left:10px;
}  
</style>